<template>
  <van-list
    v-model="listLoading"
    :finished="listFinished"
    :finished-text="listFinishedText"
    :error.sync="listError"
    :error-text="listErrorText"
    :immediate-check="listImmediateCheck"
    @load="onListLoad"
  >
    <template #loading>
      <van-loading :color="rootThemeColor" type="spinner">{{ listLoadingText }}</van-loading>
    </template>
    <template v-if="videos.length">
      <video-item
        class="video-unit"
        v-for="item in videos"
        :key="item.aid"
        :aid="item.aid"
        :bvid="item.bvid"
        :author="item.author"
        :title="item.title"
        :coverPath="item.pic"
        :view="item.play"
        :danmaku="item.video_review"
        :duration="item.duration"
        :allParams="item"
        layout="ltr"
      />
    </template>
  </van-list>
</template>

<script>
import { List as VanList, Loading as VanLoading } from 'vant'
import listLoadingMixin from '@/mixins/listLoading.js'
import VideoItem from '@/components/video-item/VideoItem.vue'
import { apiGetSearchResult } from '@/api/search.js'
export default {
  name: 'SearchResultAllByBase',
  inject: ['rootThemeColor'],
  mixins: [listLoadingMixin],
  components: {
    VanList,
    VanLoading,
    VideoItem
  },
  props: {
    keyword: {
      type: String
    },
    order: {
      type: String
    },
    searchType: {
      type: String,
      default: 'video'
    }
  },
  data () {
    return {
      totalPage: 0,
      currentPage: 1,
      pageSize: 20,
      videos: []
    }
  },
  watch: {
    keyword (newVal) {
      if (newVal) {
        this.reset()
        this.getData()
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    reset () {
      this.resetListStatus()
      this.totalPage = 0
      this.currentPage = 1
      this.videos = []
    },
    onListLoad () {
      clearTimeout(this.listTimeout)
      if (!this.listFinished) {
        this.currentPage++
        this.listTimeout = setTimeout(() => {
          this.getData()
        }, 1000)
      }
    },
    getData ({ url = '/search/byKeyword', data = {} } = {}) {
      const p = Object.assign({}, {
        keyword: this.keyword,
        page: this.currentPage,
        pagesize: this.pageSize,
        order: this.order,
        search_type: this.searchType
      }, data)
      apiGetSearchResult({ url, data: p }).then(res => {
        const { data, code } = res
        if (code === 0 && data !== null) {
          const { result, numPages, page } = data
          this.currentPage = page
          this.totalPage = numPages
          if (numPages === 0) {
            this.listFinished = true
          } else {
            this.videos.push(...result)
          }
          if (this.currentPage === this.totalPage) {
            this.listFinished = true
          }
        } else {
          this.listFinished = true
        }
      }).catch(err => {
        console.log(err)
        this.listError = true
      }).finally(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style>

</style>
